<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin: 0px;padding: 0px;
        }
        #box{
            height: 180px;width: 160px;background: blue;margin: 100px auto;
        }
        div p{
            font-size: 14px;color: white;text-align: center; line-height: 60px;
        }
        div#cont{
            height: 100px;width: 100px;background: lightgreen;margin: 0px auto;
            font-size:50px;color: #000;text-align: center;line-height: 100px;
        }

    </style>
</head>
<body>
    <div id="box">
        <p></p>
        <div id="cont"></div>
    </div>
    <script type="text/javascript">
        window.onload = loadFun;
        function loadFun() {
            var box = document.getElementById("box");
            var boys = box.children;
            var date = new Date();
            var week = ["星期天","星期一","星期二","星期三", "星期四","星期五","星期六"];
            var weekindex = date.getDay();//获取周几的索引值
            boys[0].innerHTML = date.getFullYear()+"年"+(date.getMonth()+1)+"月"+date.getDate()+"日 "+week[weekindex];
            boys[1].innerHTML  = date.getDate();
        }


    </script>

</body>
</html>